//变量声明
$padding-small:10px 0;
$padding-big:50px 0;

// 混合器
@mixin mask($opacity) {
    background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        &::before{
            display: block;
            width: 100%;
            height: 100%;
            content: '';
            background-color: rgba(0,0,0,0.7);
            position: absolute;
            top: 0;
            left: 0;
        }
}
// 页眉的样式
#nav{
    margin-bottom: 0;
    padding: $padding-small;
   .navbar-brand{
    font-size: 2.6rem;
    color: green;
   }
   #navbar{
    font-size: 2rem;
    font-weight: bold;
   }
}
// 正文样式
#advert{
    .container-fluid{
        background-image: url(../imgs/home-bg.jpg);
        @include mask(0.7)
        .container{
            padding: $padding-big;
            h2{
                color: white;
                text-align: center;
                line-height: 2em;
            }
            p{
                color: white;
                text-align: center;
            }
            img{
                margin: 10px 0;
            }
        }
    }
}
#contact{
    .container-fluid{
        background-image: url('https://api.map.baidu.com/staticimage/v2?ak=8GU4bru8ASavEmB3ae4gdvsqEVM5903w&mcode=666666&center=113.839001,34.727975&width=1000&height=600&zoom=14');
        @include mask(0.7)
        .container{
            height: 450px;
            // 左边样式
            .row div:nth-of-type(1){
                position: relative;
                top: 25px;
            }
            .row div:nth-of-type(1) p{
                color: white;
                margin: 23px 0px;
            }
            .row div:nth-of-type(1) p:nth-of-type(1){
                line-height: 30px;
            }
            .row div:nth-of-type(1) p span{
                color: white;
            }
            .row div:nth-of-type(1) h2{
                color: white;
                font-weight: bold;
            }
            .row div:nth-of-type(1) h2 .iconfont{
                font-size: 30px;
                margin-right: 20px;
            }
            // 右边样式
            .row div:nth-of-type(2){
                position: relative;
                top: 50px;
            }
            .row div:nth-of-type(2) input{
                margin: 10px 0;
                padding-left: 10px;
            }
            .row div:nth-of-type(2) input:focus{
                outline: none;
            }
            .row div:nth-of-type(2) input:nth-of-type(1){
                width: 250px;
                height: 50px;
            }
            .row div:nth-of-type(2) input:nth-of-type(2){
                width: 250px;
                height: 50px;
                position: relative;
                left: 27px;
            }
            .row div:nth-of-type(2) input:nth-of-type(3){
                width: 530px;
                height: 50px;
            }
            .row div:nth-of-type(2) input:nth-of-type(4){
                width: 530px;
                height: 90px;
            }
            .row div:nth-of-type(2) input:nth-of-type(5){
                width: 340px;
                height: 50px;
                background-color: #40D2B1;
                color: white;
                font-size: 15px;
                border: 0;
            }
        }
 
    }
}

// HTML前端开发样式
#kaifa{
    .container-fluid{
        background-color: #F8F8F8;
        .container{
            height: 400px;
            .row div:nth-of-type(1){
                line-height: 30px;
                position: relative;
                top:80px;
                left: 35px;
            }
            .row div:nth-of-type(1) p{
                margin: 15px 0;
            }
            .row div:nth-of-type(1) span{
               display: inline-block;
               width: 40px;
               height: 40px;
               background-color: #40D2B1;
               margin-right: 5px;
               border-radius: 50%; 
               text-align: center;
               line-height: 40px;         
            }
 
            .row div:nth-of-type(2) img{
                width: 400px;
                position: relative;
                top:55px;
                left: 40px;
            }
        }
    }
}
#bootstrap{
    .container-fluid{
        .container{
            height: 400px;

            .row div:nth-of-type(1) img{
                width: 500px;
                position: relative;
                top:55px;
            }
            .row div:nth-of-type(2){
                position: relative;
                top:80px;
            }
            .row div:nth-of-type(2) p{
                margin: 15px 0;
            }
        }
    }
}
// 页脚的样式
#footer{
    padding: $padding-small;
    height: 80px;
    text-align: center;
    p{
        line-height: 80px;
        span{
            padding: 0 1em;
        }
    }
}